import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'

Vue.use(VueRouter)

// 解决编程式导航点击同一个按钮时会报错(vue-router 3.0.0 后面都会有这个官方bug)
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
    return originalPush.call(this, location).catch(err => {})
};

const routes = [
  {
    path:"/",
    redirect:"/home"
  },
  {
    meta:{
      tabbarIndex:0,
      isShowTabbar:true
    },
    path: '/home',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
    children:[
      {
        path: '/home/searchPopup',
        name: 'searchPopup',
        component: () => import(/* webpackChunkName: "searchPopup" */ '../views/SearchPopup.vue')
      }
    ]
  },
  {
    meta:{
      tabbarIndex:2,
      isShowTabbar:true
    },
    path: '/category',
    name: 'Category',
    component: () => import(/* webpackChunkName: "category" */ '../views/Category.vue'),
  },
  {
    meta:{
      tabbarIndex:3,
      isShowTabbar:true
    },
    path: '/cart',
    name: 'Cart',
    component: () => import(/* webpackChunkName: "cart" */ '../views/Cart.vue'),
  },
  {
    meta:{
      tabbarIndex:1,
      isShowTabbar:true
    },
    path: '/topic',
    name: 'Topic',
    component: () => import(/* webpackChunkName: "topic" */ '../views/Topic.vue'),
  },
  {
    meta:{
      tabbarIndex:4,
      isShowTabbar:true
    },
    path: '/user',
    name: 'User',
    component: () => import(/* webpackChunkName: "user" */ '../views/User.vue'),
  },
  {
    meta:{
      isShowTabbar:false
    },
    path: '/productDetail',
    name: 'ProductDetail',
    component: () => import(/* webpackChunkName: "productDetail" */ '../views/ProductDetail.vue'),
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 全局的路由的导航守卫
// 功能：在每次路由跳转前拦截下来，类似axios拦截器。
// 什么时候执行？路由切换前就会执行
// 回调有三个参数 to,from,next 顺序不能变
// to是要去的路由对象
// from是从哪来的路由对象
// next是有个函数，必须调用才能真正跳转

// 因为每次路由跳转都执行这个函数，有些不需要判断的路由也执行了。造成了一定的资源浪费，由此移到组件内部处理！

// router.beforeEach((to,from,next)=>{
//   // 如果要去购物车
//   if(to.path == 'cart'){
//     // 判断是否登录了
//     let token = localStorage.getItem('token')
//     if(token){ //已登录直接跳转
//       next()
//     }else{
//       // 引入 Toast 组件后，会自动在 Vue 的 prototype 上挂载 $toast 方法 -- 官方
//       Vue.prototype.$toast('请先登录');
//       // 定时器
//       setTimeout(()=>{
//         next("/user");  // 强制去到"/user"所对应的路由界面
//       }, 1000);
//     }
//     return
//   }
//   next() //必须调用next才能到达想要去的页面。没有调用就无法跳转
// })

router.beforeEach((to,from,next)=>{

  if(to.path === '/home'){  // 去到home页面都要将遮掩层去掉
    store['_mutations']['showShadow/chanIsShowShadow'][0](false)
  }

  next()
})


export default router
